import React, { useState } from 'react';
import { Drawer, List, Avatar, Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './MessageDrawer.css'; // 确保样式文件名称唯一

interface MessageDrawerProps {
  visible: boolean;
  onClose: () => void;
}

const initialMessages = [
  {
    title: '系统消息',
    description: '欢迎注册!',
    avatar: '/2.jpg',
    date: '2024/07/31 11:02:09',
  },
  {
    title: '码上负责人',
    description: '欢迎你加入我们的项目，热烈祝贺',
    avatar:'/1.jpg',
    date: '2024/07/31 11:02:09',
  },
];

const MessageDrawer: React.FC<MessageDrawerProps> = ({ visible, onClose }) => {
  const [messages, setMessages] = useState(initialMessages);

  const clearMessages = () => {
    setMessages([]);
  };

  return (
    <Drawer
      title={null} // 不使用默认的标题
      placement="right"
      closable={false}
      onClose={onClose}
      visible={visible}
      width={500}
      mask={false} // 禁用蒙层
      rootClassName="unique-message-drawer"
    >
      <div className="unique-drawer-header">
        <span className="drawer-title">消息中心</span>
        <Button type="primary" onClick={clearMessages} className='clear-button'>
          全部清空
        </Button>
        <Button type="text" onClick={onClose} className="unique-drawer-close-btn">
          <CloseOutlined />
        </Button>
      </div>
      <List
        className="unique-drawer-body"
        itemLayout="horizontal"
        dataSource={messages}
        renderItem={item => (
          <List.Item style={{ padding: 0, width:'440px',marginLeft:'-22px'}}>
            <List.Item.Meta style={{borderBottom:'1px solid #d7d6d6', padding:'20px 0px'}}
              avatar={<Avatar src={item.avatar} style={{width:'40px',height:'40px',marginTop:'5px'}}/>}
              title={
                <div style={{ display: 'flex', justifyContent: 'space-between',fontSize:'20px', fontWeight:'normal', color:'#101010'}}>
                  <span>{item.title}</span>
                  <span style={{ color: '#83838f', marginRight:'-5px', fontSize: '1.25rem' }}>
                    {item.date}
                  </span>
                </div>
              }
              description={
                <div style={{ color:'#101010', fontSize:'20px',maxWidth:'215px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  <span>{item.description}</span>
                </div>
              }
            />
          </List.Item>
        )}
      />
    </Drawer>
  );
};

export default MessageDrawer;
